<template>
  <a-card>
      <a-form layout="horizontal" :form="searchForm" @submit="handleSearch" autocomplete="off">
        <a-row type="flex" justify="start" :gutter="30">
          <a-col :md="14" :sm="24">
            <a-form-item>
              <a-space>
                <a-button type="primary" icon="plus" @click="showAddForm(0,'')">{{$t('add')}}</a-button>
              </a-space>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <a-table size="middle" :expandRowByClick="expandRowByClick" :columns="columns" :data-source="data" :row-key="record => record.funId" :loading="loading" :pagination="false">
        <div slot="funTypeName" slot-scope="text">
          {{ $t("funTypeName." + text) }}
        </div>
        <div slot="action" slot-scope="text, record">
          <a-space>
            <a-button @click="showEditForm(record.funId)">
              <a-icon type="edit"/>{{$t("edit")}}
            </a-button>
            <a-button @click="showAddForm(record.funId,record.funName)">
              <a-icon type="plus"/>{{$t("add")}}
            </a-button>
            <a-popconfirm :title='$t("are_you_sure")' ok-text="Yes" okType="danger" cancel-text="No" @confirm="deleteFun(record.funId)">
              <a-icon slot="icon" type="question-circle-o" style="color: red" />
              <a-button><a-icon type="delete"/>{{$t("delete")}}</a-button>
            </a-popconfirm>
          </a-space>
        </div>
        <template v-for="(item, index) in columns" :slot="item.slotName">
          <span :key="index">{{ $t(item.slotName) }}</span>
        </template>
      </a-table>

      <a-modal v-model="editVisible" :maskClosable="false" :title="editTitle" :confirm-loading="confirmLoading" :okText="$t('submit')" @ok="saveEditForm()" @cancel="closeEditForm()">
        <a-form-model ref="editForm" layout="horizontal" :model="editForm" :label-col="{ span: 4 }" :wrapper-col="{ span: 15 }" autocomplete="off" :rules="editFormRules">
          <a-input v-model="editForm.funId" type="hidden"/>
          <a-input v-model="editForm.funPid" type="hidden"/>
          <a-form-model-item :label="$t('parent_level')" prop="funPName">
            <a-input v-model="editForm.funPName" :readOnly="true" />
          </a-form-model-item>
          <a-form-model-item :label="$t('name1')" prop="funName">
            <a-input v-model="editForm.funName" />
          </a-form-model-item>
          <a-form-model-item :label="$t('type')" prop="funType">
            <a-radio-group v-model="editForm.funType" :options="funTypes">
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="Router" prop="funRouter">
            <a-input v-model="editForm.funRouter" />
          </a-form-model-item>
          <a-form-model-item label="Url" prop="funUrl">
            <a-input v-model="editForm.funUrl" />
          </a-form-model-item>
          <a-form-model-item :label="$t('sort')" prop="funOrderby">
            <a-input-number v-model="editForm.funOrderby" />
          </a-form-model-item>
        </a-form-model>
      </a-modal>
  </a-card>
</template>

<script>
import {getFunList, getFun, saveFun, delFun} from '@/services/user'

export default {
  name: "FunList",
  i18n: require('../i18n'),
  data () {
    return {
      data : [],
      columns:[
        {
          title: 'ID',
          dataIndex: 'funId',
          align:'left',
          width: '15%',
        },
        {
          dataIndex: 'funName',
          align:'left',
          slotName: 'name1',
          slots: { title: 'name1' },
          width: '20%',
        },
        {
          dataIndex: 'funType',
          align:'center',
          scopedSlots: { customRender: 'funTypeName' },
          slotName: "type",
          slots: { title: 'type' },
          width: '10%',
        },
        {
          title: 'Router',
          dataIndex: 'funRouter',
          align:'left',
          width: '10%',
        },
        {
          title: 'Url',
          dataIndex: 'funUrl',
          align:'left',
          width: '15%',
        },
        {
          dataIndex: 'funOrderby',
          align:'center',
          slotName: "sort",
          slots: { title: 'sort' },
          width: '10%',
        },
        {
          align:'center',
          scopedSlots: { customRender: 'action' },
          slotName: "operation",
          slots: { title: 'operation' },
          width: '15%',
        }
      ],
      expandRowByClick:true,
      loading: false,
      confirmLoading: false,
      searchParams: {},
      searchForm: this.$form.createForm(this, { name: 'search' }),
      editVisible: false,
      editTitle:"",
      editForm: {
        funId: 0,
        funPid: 0,
        funPName: "",
        funName: "",
        funRemark: "",
        funType: 1,
        funUrl: "",
        funRouter: "",
        funOrderby: 0,
        children: [],
      },
      editFormNull: {
        funId: 0,
        funPid: 0,
        funPName: "",
        funName: "",
        funRemark: "",
        funType: 1,
        funUrl: "",
        funRouter: "",
        funOrderby: 0,
        children: [],
      },
      editFormRules: {
        funName: [{ required: true, message: ' ', trigger: 'blur' }],
      },
      funTypes:[],
    }
  },
  methods: {
    handleSearch(e){
      e.preventDefault();
      this.searchForm.validateFields((error, values) => {
        this.searchParams = values;
      });
      this.fetchData()
    },
    fetchData(){
      this.loading = true
      getFunList().then(res => {
        this.data = res.data.data
        this.loading = false
      }).catch(error => {
        console.log(error)
        this.loading = false
      })
    },
    showEditForm(funId) {
      this.editTitle = this.$t('edit')
      getFun(funId).then(res => {
        this.editVisible = true
        this.editForm = res.data.data
      }).catch(error => {
        console.log(error)
      })
    },
    showAddForm(funPid, funPName){
      this.editTitle = this.$t('add')
      this.editVisible = true
      this.editForm.funPid = funPid
      this.editForm.funPName = funPName
    },
    closeEditForm(){
      this.confirmLoading = false
      this.editVisible = false
      this.editForm = JSON.parse(JSON.stringify(this.editFormNull))
      this.$refs.editForm.clearValidate()
    },
    saveEditForm(){
      this.$refs.editForm.validate(valid => {
        if (valid) {
          this.confirmLoading = true
          saveFun(this.editForm).then(res => {
            if(res.data.success) {
              this.$message.success({content: this.$t('submitSuccess')})
              this.closeEditForm()
              this.fetchData()
            }else{
              this.$message.error({content: this.$t(res.data.message)})
            }
          }).catch(error => {
            console.log(error)
          })
        } else {
          return false;
        }
      });
    },
    deleteFun(funId){
      delFun(funId).then(res => {
        if(res.data.success) {
          this.$message.success({content: this.$t('deleteSuccess')})
          this.fetchData()
        }else{
          this.$message.error({content: this.$t(res.data.message)})
        }
      }).catch(error => {
        console.log(error)
      })
    },
  },
  created() {
    this.fetchData()
    this.funTypes = [
      {label:this.$t("funTypeName.1"), value:1},
      {label:this.$t("funTypeName.2"), value:2},
      {label:this.$t("funTypeName.3"), value:3},
      {label:this.$t("funTypeName.4"), value:4},
    ]
  }
}
</script>